<template>
	<view>
		<view class="heads uniFlex">
			<image v-if="user.head" :src="user.head" mode=""></image>
			<image v-else src="../../static/img/head.png" mode=""></image>
			<view class="headmsg" v-if="user.name">
				<view>{{user.name}}</view>
				<view>ID：{{user.id}}</view>
				<view>等级：{{user.daili_dengji}}</view>
			</view>
			<view @click="goLogin" class="headmsg" v-else>
				<view>您还未登录，前往登录</view>
			</view>
		</view>
		<view class="boxes">
			<view class="uniBtn title" @click="tabs(1)">
				<view>充值订单</view>
				<view class="uniFlex">
					<view>您充值的订单都在这里哦</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="boxitem uniBtn">
				<view class="box">
					<view>{{user.money}}</view>
					<view>消费金额</view>
				</view>
				<view class="box">
					<view>{{user.count}}</view>
					<view>充值次数</view>
				</view>
				<view class="box" @click="serve">
					<view>{{user.price2}}</view>
					<view>余额</view>
				</view>
			</view>
		</view>
		<view class="boxes" @click="tabs(2)">
			<view class="uniBtn title">
				<view>代理中心</view>
				<view class="uniFlex">
					<view>点击这里进行代理中心</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="boxitem uniBtn">
				<view class="box box2">
					<view>{{user.daili_num}}</view>
					<view>累计邀请</view>
				</view>
				<view class="box box2">
					<view>{{user.daili_price}}</view>
					<view>累计收益</view>
				</view>
			</view>
		</view>
		<view class="boxes">
			<view class="uniBtn boxitem" @click="tabs(3)">
				<view class="uniFlex boxicon">
					<image src="../../static/main/a9.png" mode=""></image>
					<view>户号信息</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="uniBtn boxitem" @click="dailishow = true">
				<view class="uniFlex boxicon">
					<image src="../../static/main/a7.png" mode=""></image>
					<view>申请代理</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="uniBtn boxitem" @click="kefushow = true">
				<view class="uniFlex boxicon">
					<image src="../../static/main/a7.png" mode=""></image>
					<view>客服帮助</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="uniBtn boxitem" @click="tabs(4)">
				<view class="uniFlex boxicon">
					<image src="../../static/main/a8.png" mode=""></image>
					<view>关于我们</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<u-popup :show="kefushow" :round="10" mode="center">
			<view class="kefupopup">
				<view class="uniBtn">
					<view></view>
					<u-icon @click="kefushow = false" size="28" name="close"></u-icon>
				</view>
				<view>扫描二维码添加客服</view>
				<image class="popupcode" src="../../static/main/kefu.png" mode=""></image>
				<!-- <view @click="copy(kefu.kefu_wechat)">微信：{{kefu.kefu_wechat}}</view> -->
			</view>
		</u-popup>
		<u-popup :show="dailishow" :round="10" mode="center">
			<view class="kefupopup">
				<view class="uniBtn">
					<view></view>
					<u-icon @click="dailishow = false" size="28" name="close"></u-icon>
				</view>
				<view>扫描二维码添加微信申请</view>
				<image class="popupcode" src="../../static/main/kefu.png" mode=""></image>
				<view>如需申请代理，请联系客服咨询开通</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					head: '',
					name: '',
					id: '',
					daili_dengji: '',
					price2: 0.00,//余额
					money: 0.00,//消费金额
					count: 0,//充值次数
					daili_num: 0,//推荐人数
					daili_price: 0.00,//代理收益
				},
				kefushow: false,
				dailishow: false,
				// kefu:{
				// 	kefu_qrcode:'../../static/logo.png',
				// 	kefu_wechat:"666888"
				// }
			}
		},
		onLoad(option) {
			if (option.scene) {
				var scene = decodeURIComponent(option.scene);
				let pid = this.getUrlParam(scene).pid
				uni.setStorageSync("pid",pid)
			}
			if (option.pid) {
				uni.setStorageSync("pid",option.pid)
			}
			console.log(uni.getStorageSync("pid"),'===========option.pid')
			if(uni.getStorageSync("tokenUid")){
				this.getMsg()
			}
		},
		methods: {
			// 获取二维码链接，获取后面的参数
			getUrlParam(scene) {
				var obj = {};
				for (var i = 0; i < scene.split('*').length; i++) {
					var arr = scene.split('*')[i].split('/');
					obj[arr[0]] = arr[1];
				}
				return obj
			},
			// 获取个人信息
			async getMsg(){
				let res = await this.$api.getinfo({
					uid: uni.getStorageSync("tokenUid")
				});
				if(res.code == 200){
					// console.log(res)
					this.user = res.data;
				}
			},
			// 登录
			Login() {
				uni.showModal({
					title: '温馨提示',
					content: '您还未登录，请登录后操作！',
					cancelColor: '#B3B3B3',
					confirmText: '去登录',
					confirmColor: '#FC6CA7',
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
			
						}
					}
				});
			},
			// 登录
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// copy(code) {
			// 	uni.setClipboardData({
			// 		data: code,
			// 		success: function() {
			// 			uni.showToast({
			// 				title: '复制成功'
			// 			})
			// 		}
			// 	});
			// },
			tabs(num) {
				if(!uni.getStorageSync("tokenUid")){
					this.Login()
					return
				}
				if (num == 1) {
					console.log('充值订单')
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} else if (num == 2) {
					console.log('代理中心')
					if(!this.user.daili){
						uni.showToast({
							title:'你还不是代理',
							icon:'none'
						})
						return
					}
					uni.navigateTo({
						url: '/pages/agent/agent'
					})
				} else if (num == 3) {
					console.log('户号信息')
					uni.navigateTo({
						url: '/pages/houseid/houseid'
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '/pages/about/about'
					})
					console.log('关于我们')
				}
			},
			serve() {
				if(!uni.getStorageSync("tokenUid")){
					this.Login()
					return
				}
				uni.navigateTo({
					url: '/pages/serve/serve'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.kefupopup{
		text-align: center;
		width: 500upx;
		height: 500upx;
		padding: 20upx;
		box-sizing: border-box;
		
		.popupcode{
			width: 280upx;
			height: 280upx;
			margin: 15upx 0;
		}
	}
	.boxes {
		background: #fff;
		padding: 30upx;
		margin: 20upx 0;

		.title {
			view {
				&:nth-child(1) {
					font-weight: bold;
					font-size: 30upx;
				}
			}

			.uniFlex {
				view {
					&:nth-child(1) {
						color: #4F4F4F;
						font-size: 24upx;
						margin-right: 10upx;
					}
				}

			}
		}

		.boxitem {
			padding-top: 30upx;
			width: 100%;
			box-sizing: border-box;

			.box {
				width: 33%;
				text-align: center;

				view:first-child {
					font-weight: bold;
					font-size: 36upx;
					margin-bottom: 5upx;
				}

				view:last-child {
					font-size: 24upx;
					color: #4F4F4F;
				}
			}

			.box2 {
				width: 50%;
			}

			.boxicon {
				padding-bottom: 30upx;

				image {
					width: 38upx;
					height: 38upx;
					margin-right: 20upx;
				}
			}
		}
	}

	.heads {
		padding: 60upx 30upx;

		image {
			width: 115upx;
			height: 115upx;
			border-radius: 50%;
			margin-right: 20upx;
		}

		.headmsg {
			font-size: 24upx;
			color: #676769;
			line-height: 155%;

			view {
				&:nth-child(1) {
					font-size: 30upx;
					color: #000;
					font-weight: bold;
				}
			}
		}
	}
</style>
